<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 300px;
            margin: 50px auto;
        }
        ol{
            height: 60px;
            background-color: cadetblue;
        }
        ul{
            height: 240px;
            position: relative;
        }
        ul li{
            height: 240px;
            width: 600px;
            text-align: center;
            line-height: 240px;
            font-size: 60px;
            background-color: cornflowerblue;
            position: absolute;
        }
        ol li {
            float: left;
            width: 33.33%;
            text-align: center;
            line-height: 60px;
        }
        ol li.active{
            background-color: crimson;
        }
        ul li.active{
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <ol>
            <li class="active">安踏</li>
            <li>李宁</li>
            <li>回力</li>
        </ol>
        <ul>
            <li class="active">安踏</li>
            <li>李宁</li>
            <li>回力</li>
        </ul>
    </div>
    <script>    
        // var olis = document.querySelectorAll('ol li');
        // var ulis = document.querySelectorAll('ul li');
        
        // for(var i = 0 ; i<olis.length ; i++){
        //      olis[i].setAttribute('index',i);
        //      olis[i].onclick = function(){
        //          for(var j = 0; j<olis.length ; j++){
        //             olis[j].className = '';
        //             ulis[j].className = '';
        //          }
        //          this.className = 'active';
        //          var index = this.getAttribute('index') * 1 ;
        //          ulis[index].className = 'active';
        //      }
        // }

        //获取ol 下的 li
        var olis = document.querySelectorAll('ol li');
        var ulis = document.querySelectorAll('ul li');
        //给每一个li绑定鼠标点击事件
        for(var i = 0 ; i < olis.length ; i++){
            //需要ol 下的 li 需对应 ul 下的 li 添加一个自定义属性
            olis[i].setAttribute('index',i);
            olis[i].onclick = function(){
                //排他思想 去除所有元素的 active 属性
                for(var j = 0 ; j < olis.length ; j++){
                    olis[j].className = '';
                    ulis[j].className = '';
                }
                //给被点击的元素加上 active 属性
                this.className = 'active';
                //把ul的li对应到ol
                var index = this.getAttribute('index') - 0 ;
                ulis[index].className = 'active';
            }
        }
    </script>
</body>
</html>